<template>
  <mu-flex direction="column" style="height: 100%;">
    <!--顶部-->
    <MainHeader :help="true" :hasreturn="true"/>

    <mu-container>
      <div class="repair-form">
        <mu-form :model="repair" ref="form">
          <mu-form-item label="报修人姓名" :rules="[notEmptyRule, chineseRule]" prop="name">
            <mu-text-field v-model="repair.name" placeholder="姓名"></mu-text-field>
          </mu-form-item>

          <mu-form-item label="手机号码" :rules="[notEmptyRule, telRule]" prop="tel">
            <mu-text-field v-model="repair.tel" type="number" placeholder="手机号" max-length="11"></mu-text-field>
          </mu-form-item>

          <mu-form-item label="预约时间(上)">
            <mu-date-input v-model="repair.startTime" type="dateTime" placeholder="开始时间" ></mu-date-input>
          </mu-form-item>
          <mu-form-item label="预约时间(下)">
            <mu-date-input v-model="repair.endTime" type="dateTime" placeholder="截止时间" ></mu-date-input>
          </mu-form-item>

          <mu-form-item label="故障描述" :rules="[notEmptyRule, le300Rule]" prop="explains">
            <mu-text-field v-model="repair.explains" multi-line :rows="3" max-length="300" placeholder="简述故障所在"></mu-text-field>
          </mu-form-item>

          <div class="form-item">
            <mu-button @click="submit" full-width color="teal">报修</mu-button>
          </div>
        </mu-form>
        <div class="form-tip">
          <div class="font12">
            <p>紧急维修电话：0552-0000000</p>
          </div>
        </div>
      </div>
    </mu-container>
  </mu-flex>
</template>

<script>
  import MainHeader from './MainHeader'
  import {mapMutations} from 'vuex'
  import $http from '@/store/ajax'

  export default {
    name: "DoRepairs",
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.showNav(false)
      })
    },
    beforeRouteLeave(to, from, next) {
      this.showNav(true);
      next()
    },
    components: {
      MainHeader
    },
    data () {
      return {
        repair: {
          name: '', tel: null, explains: '', startTime: null, endTime: null
        },
        notEmptyRule: { validate: (val) => val!=null && val.trim().length>0, message: '必填项不能为空！'},
        chineseRule: {validate: (val) => /^[\u4e00-\u9fa5]+$/.test(val), message: '姓名只能为中文！'},
        telRule: {validate: (val) => /^1[34578]\d{9}$/.test(val), message: '电话号码格式不正确！'},
        le300Rule: {validate: (val) => val.length >= 10 && val.length <= 300, message: '最短10字，最长300字！'}
      }
    },
    methods: {
      ...mapMutations(['showNav']),
      submit () {
        let self = this;
        this.$refs.form.validate().then((result) => {
          if (result) {
            $http.post('/api/repair/add', this.repair).then((data) => {
              if (data.success) {
                self.$toast.success("报修成功！");
                self.repair = {name: '', tel: null, explains: '', startTime: null, endTime: null}
              } else {
                self.$toast.warning("失败: " + data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .repair-form {
    padding: 12px 5px;
  }

  .mu-form-item {
    margin-bottom: 12px;
  }

  .form-item {
    margin: 12px 0;
  }

  .form-tip {
    text-align: center;
    line-height: 30px;
    color: #999;
  }
</style>
